<template lang="html">
	<div class="">
		<ul class="yanzhengma_ul_a">
			<li>
				<img class="img_denglu_a" src="../../static/phone.png" alt="">
				<input v-model="User" type="text" name="" value="" placeholder="手机号/邮箱/用户名">
			</li>
			<li>
				<img class="img_denglu_b" src="../../static/pass.png" alt="">
				<input v-model="Pass" id="control_lr" type="password" name="" value="" placeholder="密码">
				<div @click="kaiguan()" id="box_lr_ball" class="box_lr_ball">
					<span id="lr_ball" class="lr_ball"></span>
				</div>
			</li>
		</ul>
		<!-- <div class="wangji_mima">
			<input type="checkbox" @change="rememberPass()" name="" value="">
			<span>记住密码</span>
		</div> -->
		<span @click="denglu()" class="dengluBtn">登录</span>
		<div>
			<router-link class="zhuceBtn" to="/zhucepage">立即注册</router-link>&nbsp&nbsp&nbsp
			|&nbsp&nbsp&nbsp
			<router-link class="wangji_pass" to="/find">忘记密码</router-link>
		</div>
		<!-- <span>用户名或密码不正确</span> -->
	</div>
</template>

<script>
import bus from '../js/bus'
	export default{
		data(){
			return{
				User:'',
				Pass:'',
				flag:1,
				num:0,
				status:true
			}
		},
		methods:{
			kaiguan(){
				var inp =  document.getElementById('control_lr');
				var controlBall = document.getElementById('lr_ball');
				var boxColor = document.getElementById('box_lr_ball');
				if (inp.type == 'password') {
					inp.type = 'text';
					controlBall.className = 'lr_ball_a';
					boxColor.className = 'box_lr_ball_a';
				}else{
					inp.type = 'password';
					controlBall.className = 'lr_ball';
					boxColor.className = 'box_lr_ball';
				}
			},
			denglu(){
				if (this.flag == 1) {
					this.axios.get('http://txspring.cn:8080/login?user='+this.User+'&pass='+this.Pass).then(res=>{
						this.$Message.info(res.data.des);
						if(res.data.code == 1){
							this.$router.push({name:'aftermine'});
							window.localStorage.setItem("user",this.User);
						}
					})
					this.flag = 0;
					setTimeout(()=>{
						this.flag = 1;
					},1500);
				}

			}
			// rememberPass(){
			// 	this.num += 1;
			// 	if (this.num % 2 == 1) {
			// 		this.status = true;
			// 	}else if(this.num % 2 == 0){
			// 		this.status = false;
			// 	}
			// }
		}
	}
</script>

<style>
.wangji_mima{
	float: left;
	margin-left: 5%;
	margin-top: 1rem;
}
.wangji_pass{
	text-decoration: none;
	color: black;
}
.box_lr_ball{
	height: 2rem;
	width: 4rem;
	background-color: gray;
	float: right;
	border-radius: 1rem;
	margin-top: .75rem;
}
.box_lr_ball_a{
	height: 2rem;
	width: 4rem;
	background-color: #00b0ec;
	float: right;
	border-radius: 1rem;
	margin-top: .75rem;
}
.lr_ball{
	width: 1.8rem;
	height:	1.8rem;
	display: block;
	background-color: white;
	border-radius: 50%;
	margin-top: .1rem;
	margin-left: .1rem;
}
.lr_ball_a{
	width: 1.8rem;
	height:	1.8rem;
	display: block;
	background-color: white;
	border-radius: 50%;
	margin-top: .1rem;
	margin-left: 2.1rem;
}
.img_denglu_a{
	width: 2rem;
	height: 2rem;
	vertical-align: middle;
}
.img_denglu_b{
	width: 2rem;
	height: 2rem;
	vertical-align: middle;
}
.yanzhengma_ul_a{
	width: 90%;
	padding: 0;
	margin: auto;
	margin-top: 10px;
}
.yanzhengma_ul_a>li{
	list-style: none;
	text-align: left;
	width: 100%;
	line-height: 3.5rem;
	border-bottom: 1px solid lightgray;
	margin: auto;
}
.yanzhengma_ul_a>li>input{
	outline: none;
	border: none;
}
.dengluBtn{
	color: white;
	line-height: 2.5rem;
	background: #00b0ec;
	display: inline-block;
	height: 2.5rem;
	width: 90%;
	border-radius: .5rem;
	margin-top: 10px;
}
.zhuceBtn{
	display: inline-block;
	color: #ff6d10;
	margin-top: 20px;
}
</style>
